<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生分数管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .student-list {
            margin-top: 20px;
        }

        .student-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .controls {
            margin-top: 20px;
        }

        button {
            margin-right: 10px;
            padding: 8px 16px;
        }

        input {
            padding: 8px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <h1>学生分数管理系统</h1>

        <!-- 总分和平均分 -->
        <div class="stats">
            <p>总分: {{ totalScore }}</p>
            <p>平均分: {{ averageScore }}</p>
            <p>及格人数: {{ passedCount }}</p>
        </div>

        <!-- 筛选按钮 -->
        <div class="controls">
            <button @click="filter = 'all'">全部</button>
            <button @click="filter = 'passed'">及格</button>
            <button @click="filter = 'failed'">不及格</button>
        </div>

        <!-- 排序按钮 -->
        <div class="controls">
            <button @click="sort = 'asc'">按成绩正序</button>
            <button @click="sort = 'desc'">按成绩倒叙</button>
        </div>

        <!-- 增加学生 -->
        <div class="controls">
            <input v-model.number="newStudent.score" placeholder="分数" type="text">
            <input v-model="newStudent.name" placeholder="姓名">
            <button @click="addStudent">增加学生</button>
        </div>

        <!-- 搜索结果 -->
        <div class="controls">
            <input v-model="searchQuery" placeholder="搜索学生姓名">
        </div>

        <!-- 学生列表 -->
        <div class="student-list">
            <div v-for="(student, index) in filteredAndSortedStudents" :key="index" class="student-item">
                <span>{{ student.name }}</span>
                <span>{{ student.score }}</span>
                <div>
                    <button @click="deleteStudent(index)">删除</button>
                    <input v-model.number="student.score" placeholder="修改分数" type="number">
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                students: [
                    { name: '张三', score: 85 },
                    { name: '李四', score: 70 },
                    { name: '王五', score: 55 },
                    { name: '赵六', score: 90 }
                ],
                filter: 'all',
                sort: 'asc',
                searchQuery: '',
                newStudent: {
                    name: '',
                    score: ''
                }
            },
            computed: {
                // 计算总分
                totalScore() {
                    return this.students.reduce((total, student) => {
                        return total + (isNaN(student.score) ? 0 : student.score);
                    }, 0);
                },
                // 计算平均分
                averageScore() {
                    const count = this.students.length;
                    return count > 0 ? this.totalScore / count : 0;
                },
                // 计算及格人数
                passedCount() {
                    return this.students.filter(student => student.score >= 60).length;
                },
                // 筛选和排序后的学生列表
                filteredAndSortedStudents() {
                    let filteredStudents = this.students;

                    // 筛选
                    if (this.filter === 'passed') {
                        filteredStudents = filteredStudents.filter(student => student.score >= 60);
                    } else if (this.filter === 'failed') {
                        filteredStudents = filteredStudents.filter(student => student.score < 60);
                    }

                    // 搜索结果
                    if (this.searchQuery) {
                        const query = this.searchQuery.toLowerCase();
                        filteredStudents = filteredStudents.filter(student =>
                            student.name.toLowerCase().indexOf(query) !== -1
                        );
                    }

                    // 排序
                    return filteredStudents.sort((a, b) => {
                        if (this.sort === 'asc') {
                            return a.score - b.score;
                        } else {
                            return b.score - a.score;
                        }
                    });
                }
            },
            methods: {
                // 添加学生
                addStudent() {
                    if (this.newStudent.name && !isNaN(this.newStudent.score)) {
                        this.students.push({
                            name: this.newStudent.name,
                            score: this.newStudent.score
                        });
                        this.newStudent.name = '';
                        this.newStudent.score = 0;
                    }
                },
                // 删除学生
                deleteStudent(index) {
                    this.students.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>